<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script src="jquery.js"></script>
<title>h5定位获取经纬度，调用百度map API 获取位置信息</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

.map, .result {
	padding: 20px;
	text-align: justify;
}
</style>
</head>
<body>
	经纬度:
	<div class="map"></div>
	<div class="result"></div>
</body>
<script type="text/javascript">
	$(function() {
		setInterval("getLocation()", 3000);
	});

	function getLocation() {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(showPosition);
		} else {
			alert("222");
			$(".result").html("Geolocation is not supported by this browser.");
		}
	}
	function showPosition(position) {
		$(".map").html(
				"X:" + position.coords.longitude + "<br/>" + "Y:"
						+ position.coords.latitude);
		$.ajax({
			data : {
				x : position.coords.longitude,
				y : position.coords.latitude
			},
			type : "post",
			url : "map.do",
			dataType : "json",
			contentType : "application/json; charset=utf-8",
			success : function(data) {
				var inJson = eval(data);//formatted_address   sematic_descriptoin
				$(".result").html(
						inJson.result.formatted_address + "<br/>"
								+ inJson.result.sematic_description);
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert(1);
			}

		});

	}
</script>
</html>